<template>
  <div>
    <div
      class="flex flex-col justify-between h-[350px] text-[#999] bg-black sm:h-[500px] lg:relative lg:block lg:h-0 lg:pb-[40%]"
    >
      <div
        class="relative flex flex-auto min-h-0 lg:absolute lg:top-0 lg:right-0 lg:block lg:w-[71.1%] lg:h-full after:absolute after:[content:''] after:inset-0 after:block after:[background-image:linear-gradient(to_top,rgba(0_0_0_1)_0%,rgba(0_0_0_0.1)_50%,rgba(0_0_0_0.1)_100%)] lg:after:[background-image:linear-gradient(to_right,#000_0,transparent_50%,transparent_100%)]"
      >
        <div class="w-full lg:inline">
          <button
            v-if="trailer"
            class="absolute top-1/2 left-1/2 z-[1] bg-transparent translate-x-1/2 translate-y-1/2 lg:hidden"
            type="button"
            aria-label="Play Trailer"
            @click="openModal"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="55"
              height="55"
              viewBox="0 0 55 55"
            >
              <circle
                cx="27.5"
                cy="27.5"
                r="26.75"
                fill="none"
                stroke="#fff"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
              <path
                fill="none"
                stroke="#fff"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
                d="M20.97 40.81L40.64 27.5 20.97 14.19v26.62z"
              />
            </svg>
          </button>

          <img
            :src="backdrop"
            class="w-full object-cover inline-block max-w-none h-full"
            :alt="name"
          />
        </div>
      </div>

      <div
        class="p-[0_15px_15px] md:p-[0_40px_40px] lg:absolute lg:top-0 lg:bottom-0 lg:left-0 lg:flex lg:items-center lg:w-[55%] lg:h-full lg:p-[50px_40px] xl:p-[50px] 2xl:w-[43%]"
      >
        <Motion
          :initial="{
            opacity: 0,
            transform: 'translate3d(0, 20px, 0)',
          }"
          :animate="{
            opacity: 1,
            transform: 'translateZ(0)',
          }"
          :exit="{
            opacity: 0,
            transform: 'translate3d(0, 20px, 0)',
          }"
          :transition="{
            transform: {
              duration: 0.75,
              ease: 'cubic-bezier(.4, .25, .3, 1)',
            },
            opacity: {
              duration: 0.75,
              ease: 'cubic-bezier(.4, .25, .3, 1)',
            },
          }"
        >
          <div>
            <h1
              class="mb-[14px] text-[28px] leading-[1.1] text-white md:mb-[18px]"
            >
              <template v-if="isSingle">
                {{ name }}
              </template>

              <template v-else>
                <router-link
                  :to="{ name: `${type}Detail`, params: { id: item.id } }"
                >
                  {{ name }}
                </router-link>
              </template>
            </h1>

            <div class="text-sm md:flex 2xl:text-[0.9vw]">
              <div
                v-if="stars || item.vote_count"
                class="flex items-center mb-[13px] md:m-[0_12px_0_0]"
              >
                <div
                  v-if="stars"
                  class="w-[85px] h-[14px] mr-[10px] bg-[url('@/assets/images/stars.png')] bg-no-repeat [background-size:auto_100%] md:w-[103px] md:h-[17px]"
                >
                  <div
                    class="h-full bg-[url('@/assets/images/stars-filled.png')] bg-no-repeat [background-size:auto_100%]"
                    :style="{ width: `${stars}%` }"
                  />
                </div>
                <div v-if="item.vote_count > 0">
                  {{ numberWithCommas(item.vote_count) }} Reviews
                </div>
              </div>

              <div class="flex items-center">
                <span class="mr-[9px]" v-if="item.number_of_seasons"
                  >Season {{ item.number_of_seasons }}</span
                >
                <span class="mr-[9px]" v-if="yearStart">{{ yearStart }}</span>
                <span class="mr-[9px]" v-if="item.runtime">{{
                  runtime(item.runtime)
                }}</span>
                <span class="mr-[9px]" v-if="cert">Cert. {{ cert }}</span>
              </div>
            </div>

            <div
              class="hidden mt-[25px] text-[15px] text-white md:block 2xl:text-[0.9vw]"
            >
              {{ truncate(item.overview, 200) }}
            </div>

            <button
              v-if="trailer"
              class="hidden mt-[30px] 2xl:text-[0.9vw] md:inline-flex items-center p-[15px_25px] text-[15px] font-medium text-white cursor-pointer bg-secondary transition-all duration-200 hover:bg-[#2f2f2f] focus:bg-[#2f2f2f]"
              type="button"
              @click="openModal"
            >
              <span class="icon"
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="15"
                  height="15"
                  viewBox="0 0 24 24"
                  fill="#fff"
                >
                  <path d="M3 22v-20l18 10-18 10z" />
                </svg>
              </span>
              <span class="txt">Watch Trailer</span>
            </button>
          </div>
        </Motion>
      </div>
    </div>

    <!-- <Modal
      v-if="modalVisible"
      :data="trailer"
      type="iframe"
      @close="closeModal"
    /> -->
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
import { useRoute } from "vue-router";
import { useDetails } from "@/hooks/useDetails";
import { numberWithCommas, truncate, runtime } from "@/lib/filter";
import { Motion } from "motion-v";

const { item } = defineProps({
  item: {
    type: Object,
    required: true,
  },
});

const route = useRoute();

const { name, stars, yearStart, cert, backdrop, trailer } = useDetails(item);

const isSingle = ref(item.id === route.params.id);
const modalVisible = ref(false);

const type = computed(() => {
  return item.title ? "movie" : "tv";
});

const openModal = () => {
  modalVisible.value = true;
};

const closeModal = () => {
  modalVisible.value = false;
};
</script>
